{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <style>
		.box {
		  border: 1px solid #f8f8f8;
		  box-shadow: 0 0 4px #D8D8D8;
		  background: transparent;
		  margin-bottom: 20px;
		  -webkit-border-radius: 3px;
		  -moz-border-radius: 3px;
		  border-radius: 3px;
		}
		.box-content {
		  position: relative;
		  -webkit-border-radius: 0 0 3px 3px;
		  -moz-border-radius: 0 0 3px 3px;
		  border-radius: 0 0 3px 3px;
		  padding: 15px;
		  background: #FCFCFC;
		}
		.m-ticker span {
		  display: block;
		  font-size: 0.8em;
		  line-height: 1em;
		}
    </style>
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Invoice DevOOPS</h1>
        </div>
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-content">
						<div class="row">
							<div class="col-xs-6">
								<b>BILL TO:</b>
								<address>
									<strong>Free Customers Foundation</strong><br>
									52 Franklin Street, Fifth Floor<br>
									Boston, MA 02110-1301<br>
									USA<br>
									<abbr title="Phone">P:</abbr> (123) 456-7890
								</address>
								<address>
									<strong>Full Name</strong><br>
									<a href="mailto:#">first.last@example.com</a>
								</address>
							</div>
							<div class="col-xs-6 text-right">
								<address>
									<strong>Free Software Foundation</strong><br>
									51 Franklin Street, Fifth Floor<br>
									Boston, MA 02110-1301<br>
									USA<br>
									<abbr title="Phone">P:</abbr> (123) 456-7890
								</address>
								<h3 class="invoice-header">Invoice #37095</h3>
								<p>Invoice Date: 1/12/14</p>
								<p class="txt-danger">Payment Due: 10/12/14</p>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<br/>
								<table class="table table-hover">
									<thead>
										<tr>
											<th>ITEMS</th>
											<th>QTY</th>
											<th>UNIT PRICE</th>
											<th>TOTAL</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td class="m-ticker"><b>Server #1</b><span>SAN Storage 40Gb, vCPU 2 Core, vRAM 2GB</span></td>
											<td>2</td>
											<td>$12.5</td>
											<td>$25</td>
										</tr>
										<tr>
											<td class="m-ticker"><b>Server #2</b><span>SAN Storage 80Gb, vCPU 4 Core, vRAM 4GB</span></td>
											<td>2</td>
											<td>$25</td>
											<td>$50</td>
										</tr>
										<tr>
											<td class="m-ticker"><b>Server #3</b><span>SAN Storage 1600Gb, vCPU 8 Core, vRAM 8GB</span></td>
											<td>2</td>
											<td>$50</td>
											<td>$100</td>
										</tr>
										<tr class="active">
											<td></td>
											<td></td>
											<td></td>
											<td><b>$175<sup>*</sup></b></td>
										</tr>
									</tbody>
								</table>
								<small>* VAT included</small>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-6 col-xs-offset-6">
								<div class="col-xs-4">
									<a href="#" class="btn btn-default btn-label-left"><span><i class="fa fa-floppy-o"></i></span> Save as pdf</a>
								</div>
								<div class="col-xs-4 col-xs-offset-4">
									<a href="#" class="btn btn-primary btn-label-left"><span><i class="fa fa-credit-card"></i></span> Pay now</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div> <!-- /container -->
{% endblock %}